<template>
  <div class="custom-select">
    <div class="selected" @click="toggleMenu" :data-open="menuVisible">
      {{ selected || "请选择" }}
    </div>
    <div v-if="menuVisible" @mousedown.prevent class="dropdown">
      <ul>
        <li
          v-for="item in arr"
          :key="item"
          :class="{ active: item === selected }"
          @click="selectItem(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"

const menuVisible = ref(false)
function toggleMenu() {
  menuVisible.value = !menuVisible.value
}
function selectItem(item) {
  selected.value = item
  menuVisible.value = false
}

// 定义初始值和可选项
const selected = defineModel()
const props = defineProps({
  options: {
    type: Array,
    default: () => [],
  },
})
const arr = props.options || []
</script>

<style scoped>
* {
  padding: 0;
}
.custom-select {
  position: relative;
  width: 120px;
  background: #e0e5ec;
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow:
    5px 5px 10px #b8bdc5,
    -5px -5px 10px #ffffff;
  transition: all 0.3s ease;
}
.custom-select:hover {
  box-shadow:
    3px 3px 6px #b8bdc5,
    -3px -3px 6px #ffffff;
}
.custom-select .selected {
  position: relative;
  padding-right: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 500;
  color: #4d535f;
}
.custom-select .selected::after {
  content: "▼";
  display: inline-block;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #8a919f;
  transition: all 0.3s ease;
}
.selected[data-open="true"]::after {
  transform: rotate(180deg) translateY(50%);
}
.custom-select .dropdown ul {
  margin: 0;
  list-style: none;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    inset 3px 3px 6px #b8bdc5,
    inset -3px -3px 6px #ffffff;
  padding: 8px 0;
  z-index: 100;
  margin-top: 5px;
}
.dropdown li {
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #4d535f;
}
.dropdown li.active,
.dropdown li:hover {
  background: #d1d9e6;
  color: #3a404d;
  box-shadow:
    inset 2px 2px 5px #b8bdc5,
    inset -2px -2px 5px #ffffff;
}
</style>
